<template>
  <!-- 保持原有模板结构不变 -->
  <div class="register-container">
    <div class="register-card">
      <van-form @submit="onSubmit">
        <van-field label="用户" v-model="regForm.name" type="text" placeholder="请输入用户"
          :rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
        <van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
          :rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
        <van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
          :rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
        <van-field label="邮箱" v-model="regForm.email" type="email" placeholder="请输入邮箱"
          :rules="[{ pattern:regEmail, message: '无效邮箱' }]" />
        <van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
          :rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="regForm.gender" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="昵称" v-model="regForm.nick_name" type="text" placeholder="请输入昵称" />
        <van-field name="uploader" label="头像">
          <template #input>
            <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <div class="content-padded">
        <p>注册成功后的用户可用于登录</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { showToast } from 'vant';
  import { registerAPI, uploadAvatarAPI } from "@/api/user.js";
  import { setUserLocal } from '@/utils/auth'
  export default {
    data() {
      return {
        regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
          name: "",
          password: "",
          password2: "",
          email: "",
          phone: "",
          gender: 1,
          avatar: "",
          nick_name: ""
        },
        avatarList: [],
        //规则:字母数字‘6~12        
        regNamePwd: /^[a-z0-9]{3,12}$/i,
        regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
        regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      };
    },
    methods: {
      //手动处理文件上传
      afterRead(file) {
        file.status = 'uploading';
        file.message = '上传中...';
        uploadAvatarAPI(file.file).then(result => {
          file.status = '';
          file.message = '';
          //重新生成显示的图片url
          this.avatarList = [];
          this.avatarList.push({
            url: this.APIDomainName + result.url
          })
          //设置用户表中的字段值
          this.regForm.avatar = result.url;
        });
      },
      //处理提交保存
      onSubmit() {
        if (this.regForm.password != this.regForm.password2) {
          showToast("密码两次输入不一致");
          return;
        }
        //注意传递过去的参数user的属性名
        let user = this.regForm;
        delete user.password2; //删除该临时的字段
        registerAPI(user).then(result => {
          setUserLocal(result.data.user);
          this.$router.push({
            name: "login"
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;

  .register-card {
    width: 90%;
    max-width: 500px;
    padding: 30px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

.van-field {
  margin-bottom: 18px;
  border-radius: 8px;
  background: #f8f9fa;
  
  &::after {
    display: none;
  }

  :deep(.van-field__label) {
    color: #2c3e50;
    width: 60px;
  }
}

.van-radio-group {
  padding: 8px 0;
  
  .van-radio {
    margin-right: 20px;
    
    :deep(.van-radio__icon--checked .van-radio__icon) {
      background-color: #6366f1;
      border-color: #6366f1;
    }
  }
}

.van-uploader {
  :deep(.van-uploader__upload) {
    width: 100px;
    height: 100px;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
  }
  
  :deep(.van-uploader__preview-image) {
    border-radius: 8px;
  }
}

.van-button--info {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 25px;
  margin-top: 25px;
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.95);
  }
}

.content-padded {
  text-align: center;
  color: #64748b;
  margin: 20px 0;
}
</style>